<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../vue.js"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<!--生命周期-->
<div id="box" v-cloak>
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg"></p>
</div>
<!--计算属性-->
<div id="box2">
    {{a}}<br>
    {{b}}
</div>
<!--循环重复的数据-->
<div id="box3">
    <input type="button" value="添加" @click="add">
    <ul>
        <li v-for="val in arr">
            {{val}}
        </li>
    </ul>
</div>
<script>
    window.onload = function(){
        new Vue({
            el:"#box",
            data:{
                msg:'<strong>welcome</strong>',
                a:1,
                b:1
            }
            /* ,
           created:function () {
                alert('实例已经创建');//new Vue
            },
            beforeMount:function () {
                alert('编译之前');
            },
            mounted:function () {
                alert('编译之后');
            },
            beforeDestory:function () {
                alert('销毁之前');
            },
            destoryed:function () {
                alert('销毁之后');
            }*/
        });
/*
* new Vue 是对象
* vm 是实例
* */
       var vm = new Vue({
//            el:"#box2",
           aa:7,//自定义属性
           show:function () {
//             alert(9);
           },
            data:{
                a:1
            },
           computed:{//计算属性
               /* b:function () {//b是一个属性,b的值取决于return的值
//                    业务逻辑
                    return this.a+1;
                }*/
               b:{
                   get:function () {
                       return this.a + 1;
                   },
                   set:function (val) {
                       this.a = val;
                   }
               }
           }
        }).$mount("#box2")
        //        手动挂载
//        vm.$mount('#box2');//可链式调用
//        调用show
        vm.$options.show();
        console.log(vm.$options.aa);
        console.log(vm.a);//对象能访问属性
        console.log(vm.b);
        console.log(vm.$el);//元素
        vm.$el.style.color = "red";
        console.log(vm.$data.a);//a

        document.onclick = function () {
            vm.b = 101;
        }

        var vm2 = new Vue({
            data:{
                arr:['apple','pear','orange']
            },
            methods:{
                add:function () {
                    this.arr.push('tomato');
                }
            }
        }).$mount("#box3");
    }
</script>
</body>
</html>